<form class="wrapper" nz-form [formGroup]="form">
    <div class="head">
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label nzRequired nzFor="clusterName" style="width: 115px;">集群名称</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <input nz-input placeholder="" formControlName="clusterName" id="clusterName"
                               maxlength="100"/>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="23">
                <nz-form-item nzFlex>
                    <nz-form-label nzFor="clusterCode" style="width: 115px;">集群编号</nz-form-label>
                    <nz-form-control style="width: 100%;">
                        <input nz-input placeholder="选填，只允许输入字母、数字和下划线，为空则由网关自动生成" formControlName="clusterCode"
                               id="clusterCode" maxlength="100"/>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </div>
    <nz-card [nzBordered]="false" [nzSize]="'small'" nzTitle="服务器列表" [nzExtra]="extraTemplate">
        <ng-template #extraTemplate>
            <button nz-button [disabled]="editing" nzType="primary" nzShape="circle"
                    (click)="addTarget()">
                <i nz-icon nzType="file-add"></i>
            </button>&nbsp;
            <button nz-button [disabled]="editing" nzType="danger" nzShape="circle"
                    nz-popconfirm nzTitle="您确认要删除所选记录吗?"
                    (nzOnConfirm)="deleteTargets()">
                <i nz-icon nzType="delete"></i>
            </button>
        </ng-template>
        <div class="content">
            <div class="tabset-wrapper">
                <nz-table #pT1 nzBordered
                          [nzScroll]="{ y: '240px' }"
                          [nzData]="targets"
                          [nzSize]="'small'"
                          [nzFrontPagination]="false"
                          [nzShowPagination]="false">
                    <thead>
                    <tr>
                        <th nzWidth="40px">&nbsp;</th>
                        <th nzWidth="150px">IP</th>
                        <th nzWidth="100px">端口</th>
                        <th nzWidth="100px" nzAlign="right">权重</th>
                        <th nzWidth="100px" nzAlign="center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of pT1.data; let i = index">
                        <td nzShowCheckbox [(nzChecked)]="item.checked"></td>
                        <td>
                            <ng-container *ngIf="!editCache[item.id].edit; else ipInputTpl">
                                {{ item?.ip }}
                            </ng-container>
                            <ng-template #ipInputTpl>
                                <input type="text" nz-input [(ngModel)]="editCache[item.id].data.ip" [ngModelOptions]="{standalone: true}" />
                            </ng-template>
                        </td>
                        <td>
                            <ng-container *ngIf="!editCache[item.id].edit; else portInputTpl">
                                {{ item?.port }}
                            </ng-container>
                            <ng-template #portInputTpl>
                                <input type="text" nz-input [(ngModel)]="editCache[item.id].data.port" appNumberOnly [scale]="0" [ngModelOptions]="{standalone: true}" />
                            </ng-template>
                        </td>
                        <td nzAlign="right">
                            <ng-container *ngIf="!editCache[item.id].edit; else weightInputTpl">
                                {{ item?.weight }}
                            </ng-container>
                            <ng-template #weightInputTpl>
                                <input type="text" nz-input [(ngModel)]="editCache[item.id].data.weight" appNumberOnly [scale]="0" [ngModelOptions]="{standalone: true}" />
                            </ng-template>
                        </td>
                        <td nzAlign="center">
                            <ng-container *ngIf="!editCache[item.id].edit; else saveTpl">
                                <ng-container *ngIf="bean == null">
                                    <button nz-button nzType="primary" (click)="startEdit(item.id)">
                                        <i nz-icon nzType="form"></i>
                                    </button>&nbsp;
                                </ng-container>
                                <button nz-button nzType="danger" nz-popconfirm nzTitle="您确认要删除【{{item?.ip + ':' + item?.port}}】吗?"
                                        (nzOnConfirm)="deleteTargets(item)">
                                    <i nz-icon nzType="delete"></i>
                                </button>
                            </ng-container>
                            <ng-template #saveTpl>
                                <button nz-button nzType="primary" (click)="saveTarget(item.id)">
                                    <i nz-icon nzType="save"></i>
                                </button>&nbsp;
                                <button nz-button nzType="danger" (click)="cancelEdit(item.id)">
                                    <i nz-icon nzType="stop"></i>
                                </button>
                            </ng-template>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </nz-card>
</form>
